<template>
  <div class="login">
    <div class="login-header">
      <img :src="logo" alt="分秒金融">
    </div>
    <div class="login-input">
      <ul>
        <li class="border-1px">
          <span class="icon-user"></span><input type="number" placeholder="手机号码" v-model="phoneNum">
        </li>
        <li class="border-1px" v-if="!isText">
          <span class="icon-password"></span><input type="password" placeholder="密码" v-model.trim="passWord"><span @click="togglePassword" class="icon-eye-close"></span>          
        </li>
        <li class="border-1px" v-if="isText">
          <span class="icon-password"></span><input type="text" placeholder="密码" v-model.trim="passWord"><span @click="togglePassword" class="icon-eye-open"></span>
        </li>
      </ul>
    </div>
    <p class="forget" @click="toForgetPassword">忘记密码？</p>
    <div class="pillbtn-wrapper" @click="login">
      <pillbtn>
        <p>登录</p>
      </pillbtn>
    </div>
    <p class="login-footer">没有账号？<span @click="toSignup">请注册</span></p>
  </div>
</template>

<script>
  import pillbtn from 'components/common/pillbtn'
  import { Indicator, Toast } from 'mint-ui'

  export default {
    data () {
      return {
        phoneNum: '',
        passWord: '',
        isText: false,
        logo: require('assets/women_logo@3x.png')
      }
    },
    computed: {
      toggleClass () {
        return this.isText ? 'icon-err' : 'icon-err'
      }
    },
    methods: {
      togglePassword () {
        this.isText = !this.isText
      },
      login () {
        if (!(/^1[34578]\d{9}$/.test(this.phoneNum))) {
          Toast('请输入正确的手机号')
          return
        }
        if (!(/^[a-zA-Z0-9]{6,18}$/.test(this.passWord))) {
          Toast('请输入6到18位的密码')
          return
        }

        Indicator.open('登录中...')
        this.$http.post('/api/member/login?loginName=' + this.phoneNum + '&password=' + this.passWord)
        .then((res) => {
          if (res.data.success) {
            this.$cookie.set('acctKey', res.data.data)
            Indicator.close()
            // 如果路由拦截中有要redirect的url， 登陆成功后就跳转到该url
            if (this.$route.query.redirect) {
              this.$router.push(this.$route.query.redirect)
              console.log(this.$route.query.redirect)
            } else {
              this.$router.push('/mine')
            }
            // this.$router.push('/mine')
          } else {
            Indicator.close()
            Toast(res.data.msg)
          }
        })
        .catch((err) => {
          Indicator.close()
          console.log(err)
          Toast({
            message: '可能网络错误了',
            iconClass: 'icon icon-err'
          })
        })
      },
      toSignup () {
        this.$router.push('/signup')
      },
      toForgetPassword () {
        this.$router.push('/forgetPasswordStep1')
      }
    },
    components: {
      pillbtn
    }
  }
</script>

<style lang='scss'>
  @import '../../common/scss/tool.scss';
  @import '../../common/scss/_variable.scss';

  .login {
    width: 100%;
    height: 100%;
    background: url('../../assets/land_bg@2x.png');
    background-size: cover;
    &-header {
      text-align: center;
      img {
        width: 180px;
        margin-top: 118px;
      }
    }
    &-input {
      ul {
        padding: 60px 30px 0 30px;
        li {
          display: flex;
          padding: 16px 0 16px 30px;
          margin-top: 64px;
          font-size: 30px;
          color: $base-999;
          @include border-1px(#ccc);
          &:nth-child(2) {
            span:nth-child(3) {
              padding: 0 30px;
            }
          }
          &:nth-child(1) {
            margin-top: 0;
          }
          input {
            outline: none;
            flex: 1;
            margin-left: 24px;
            background-color: transparent;
          }
        }
      }
    }
    ul {
      margin-top: 66px;
    }
    .pillbtn-wrapper {
      width: 570px;
      margin: 0 auto;
    }
    .forget {
      font-size: 26px;
      color: $base-ff6c00;
      text-decoration: underline;
      text-align: center;
      margin: 60px 0;
    }
    &-footer {
      font-size: 36px;
      color: $base-ff6c00;
      text-align: center;
      margin-top: 120px;
      span {
        text-decoration: underline;
      }
    }
  }
</style>
